
 <template>
  <div>
    <!-- banner -->
    <div id="banner_wrap">
      <div id="banner">
        <!-- 导航 -->
        <nav>
          <ul>
            <li @click="$router.push({name:'Mine'})">我的</li>
            <li @click="$router.push({name:'ranking'})">排行榜</li>
            <li>歌单</li>
            <li @click="$router.push({name:'broadcasting'})">电台</li>
            <li @click="$router.push({name:'Musician'})">音乐人</li>
            <li>新上榜</li>
            <div style="margin-top:10px;">
              <el-autocomplete
                popper-class="my-autocomplete"
                v-model="state"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
                @input="getSearchSong(state)"
              >
                <i class="el-icon-search el-input__icon" slot="suffix"></i>
                <template slot-scope="{ item }">
                  <div
                    class="name"
                    @click="$router.push({name:'sing',params:{id:item.id}})"
                  >{{ item.name }}</div>
                  <span class="addr">{{ item.artists[0].name }}</span>
                </template>
              </el-autocomplete>
            </div>
          </ul>
        </nav>
      </div>
    </div>
    <!-- mv和精品歌单 -->
    <section>
      <!-- mv -->
      <div class="left">
        <!-- 动态获取每日推荐mv -->
        <video :src="urlData" controls autoplay="true"></video>
      </div>
      <!-- 精品歌单 -->
      <div class="right">
        <!-- 遍历拿出每一项数据 -->
        <div
          v-for="item in rightData"
          :key="item.id"
          @click="$router.push({name:'detail',params:{id:item.id}})"
        >
          <!-- 动态绑定获取图片 -->
          <img :src="item.coverImgUrl" alt>
          <div>
            <!-- 渲染数据 -->
            <span>{{item.tag}}</span>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 网友精选碟 -->
    <div id="news">
      <!-- 遍历拿数据 -->
      <div
        v-for="item in songData"
        :key="item.id"
        @click="$router.push({name:'detail',params:{id:item.id}})"
      >
        <!-- 动态获取 -->
        <img :src="item.coverImgUrl" alt>
        <span>{{item.name}}</span>
      </div>
    </div>
    <!-- 推荐歌手 -->
    <div id="single">
      <div>
        <!-- 动态获取 -->
        <img :src="newSingleData" alt>
        <span>{{singleData.briefDesc}}</span>
      </div>
    </div>
    <!-- 电台 -->
    <div id="bottom">
      <!-- 遍历拿数据 -->
      <div v-for="item in bottomData" :key="item.id">
        <!-- 动态获取 -->
        <img
          :src="item.coverUrl"
          alt
          @click="$router.push({name:'radiodetails',params:{data:item}})"
        >
        <span>{{item.reason}}</span>
        <span>喜欢：{{item.likedCount}}</span>
        <span>{{item.name}}</span>
      </div>
    </div>
    <!-- 底部 -->
    <div id="footer_wrap">
      <footer>
        <div>
          <ul>
            <li>网站导航</li>
            <li>客户服务</li>
            <li>关于音乐</li>
          </ul>
          <ul>
            <li>发现音乐</li>
            <li>我的收藏</li>
            <li>音乐人</li>
            <li>朋友</li>
          </ul>
        </div>
        <div>
          <i class="el-icon-headset"></i>
          <i class="el-icon-service"></i>
          <i class="el-icon-mic"></i>
          <i class="el-icon-thumb"></i>
        </div>
      </footer>
    </div>
  </div>
</template>
<script>
// 引入axios方法
import {
  song,
  right,
  leftId,
  leftUrl,
  single,
  bottom,
  searchSong
} from "@/api";
// 暴露导出
export default {
  data() {
    return {
      urlData: "", //mv地址
      rightData: [], //精品歌单数组
      songData: [], //网友精选碟数组
      newSingleData: "", //推荐歌手地址
      singleData: [], // 推荐歌手数组
      bottomData: [], //电台数组
      restaurants: [], //搜索匹配内容数组
      state: "",
      id:""
    };
  },
  created() {
    this.getLeft(), //mv
      this.getRight(), //精选歌单
      this.getSong(), //网友精选碟
      this.getSingle(), //推荐歌手
      this.getBottom(); //电台
  },

  methods: {
    getSong() {
      //网友精选碟
      song().then(res => {
        this.songData = res.data.playlists;
        // console.log(this.songData);
      });
    },
    getRight() {
      //精选歌单
      right().then(res => {
        this.rightData = res.data.playlists;
      });
    },
    getLeft() {
      //mv的数据
      leftId().then(res => {
        let aid = res.data.data[0].id + "";
        this.getUrl({ id: aid });
      });
    },
    getUrl(data) {
      //mv的地址
      // console.log(data)
      leftUrl(data).then(res => {
        this.urlData = res.data.data.url;
      });
    },

    getSingle() {
      single().then(res => {
        //网友精选
        // console.log(res.data.topicData[0].coverUrl);
        this.singleData = res.data;
        this.newSingleData = res.data.topicData[0].coverUrl;
      });
    },
    getBottom() {
      bottom().then(res => {
        //调用电台接口
        this.bottomData = res.data.programs;
        // console.log(res.data.programs);
      });
    },
    //搜索框的方法
    getSearchSong(keywords) {
      searchSong(keywords).then(res => {
        this.restaurants = res.data.result.songs;
        // console.log(this.restaurants)
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      // console.log(item);
    }
  }
};
</script>


<style>
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}
.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}
.my-autocomplete li .highlighted .addr {
  color: #ddd;
}
.el-icon-search {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
}
</style>